<template>
	<!-- 消息通知 -->
	<view class="wrap">
		<view
			style="width: 100%; display: flex;justify-content:space-around;align-items: center;height: 80rpx;background-color: #FFFFFF;">
			<view class="tabsNav">
				<u-dropdown>
					<u-dropdown-item v-model="value1" title="全部" :options="options1"></u-dropdown-item>
				</u-dropdown>
			</view>

			<view class="tabsNav" :class="swiperCurrent== 0 ? 'activeNav' : '' " @click="tabsChange(0)">
				未读
				<u-badge v-if="hasContent" :count="2" type="error" :offset='[12,10]' size='mini'></u-badge>
			</view>
			<view class="tabsNav" :class="swiperCurrent== 1 ? 'activeNav' : ''" @click="tabsChange(1)">
				已读
			</view>

		</view>
		<swiper :current="swiperCurrent" style="flex:1;" @change="swiperChange">
			<view class="unread">
				<u-button type="primary" :custom-style="customStyle" hover-class="none" shape="circle">清除未读</u-button>

			</view>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height:100%;width:100%;">
					<notice-item v-for="(item,index) in unReadList" :key="index" :notice="item"></notice-item>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height:100%;width:100%;">
					111
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import noticeItem from './components/notice-item.vue'
	export default {
		components: {
			noticeItem
		},
		data() {
			return {
				customStyle: {
					marginTop: '30rpx',
					color: '#666',
					background: '#fff',
					width: '240rpx',
					padding: '0 50rpx',
					height: '70rpx',


				},
				hasContent: true,
				value1: 1,
				value2: 2,
				options1: [{
						label: '报修',
						value: 1,
					},
					{
						label: '巡检',
						value: 2,
					},
				],

				tabList: [{
					name: '未读'
				}, {
					name: '已读'
				}],
				current: 0,
				swiperCurrent: 0,
				unReadList: [{
						isMission: true,
						noticeTime: '2021-06-18 18:22:21',
						title: '您有一个报修故障待维修，请及时处理',
						orderNo: 216003,
						deviceName: '设备AA',
						description: '接触不良',
						reporter: '李工',
						reportTime: '2021-06-18 18:22:21'
					},
					{
						isMission: true,
						noticeTime: '2021-06-18 18:22:21',
						title: '您有一个报修故障待维修，请及时处理',
						orderNo: 216003,
						deviceName: '设备AA',
						description: '接触不良',
						reporter: '李工',
						reportTime: '2021-06-18 18:22:21'
					},
					{
						isMission: false,
						noticeTime: '2021-06-18 18:22:21',
						title: '您有一个报修故障待维修，请及时处理',
					},
				],
				readList: []
			}
		},

		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				console.log(index)
				this.swiperCurrent = index;
				this.current = index
			},
			swiperChange(e) {
				console.log(e.detail.current)
				this.swiperCurrent = e.detail.current
			}
			// // swiper-item左右移动，通知tabs的滑块跟随移动
			// transition(e) {
			// 	let dx = e.detail.dx;
			// 	this.$refs.uTabs.setDx(dx);
			// },
			// // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// // swiper滑动结束，分别设置tabs和swiper的状态
			// animationfinish(e) {
			// 	let current = e.detail.current;
			// 	this.$refs.uTabs.setFinishCurrent(current);
			// 	this.swiperCurrent = current;
			// 	this.current = current;
			// },

		},

	}
</script>

<style scoped lang="scss">
	.wrap {
		height: calc(100vh);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;

		.swiper-item {
			height: 100%;
		}
	}

	.tabsNav {
		flex: 1;
		background-color: #FFFFFF;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		margin: 0 60rpx;
		position: relative;
	}

	.activeNav {
		color: #009DFF;
		border-bottom: 2rpx solid #009DFF;
		transition: 1s border-bottom;
	}

	.unread {
		margin: 0 30rpx;
	}

	::v-deep .tabsNav .u-dropdown__content {
		width: 750rpx;
		left: -60rpx;
	}
</style>
